<template>
  <el-row direction="vertical">
    <el-col style="height: 1rem">
      <div style="display: flex">
        <div style="line-height: 20px;flex-grow: 10;text-align: left">

          {{ card.data.name }}
        </div>
        <el-tag :color="stateColor.HP[card.data.HP.status]" effect="dark"
                size="small">{{ card.data.HP.status }}
        </el-tag>
        <el-tag :color="stateColor.MP[card.data.MP.status]" effect="dark"
                size="small">{{ card.data.MP.status }}
        </el-tag>
      </div>
    </el-col>
    <el-col>
      <little-double-max-bar bar-height="0.4rem" :bar-data="card.data.HP"
                             double-max-color="grew"
                             :value-color="stateColor.HP[card.data.HP.status]"
                             :max-color="stateColor.HP[card.data.HP.status]"></little-double-max-bar>
    </el-col>
    <el-col>
      <little-double-max-bar bar-height="0.4rem" :bar-data="card.data.MP"
                             double-max-color="grew"
                             :value-color="stateColor.MP[card.data.MP.status]"
                             :max-color="stateColor.MP[card.data.MP.status]"></little-double-max-bar>
    </el-col>


  </el-row>

</template>

<script>
import DefaultCard from "@/components/card/DefaultCard";
import {store} from "@/js/store";
import LittleDoubleMaxBar from "@/components/bar/LittleDoubleMaxBar";
import {Card} from '@/js/card'

export default {
  name: "TinyCard",
  components: {LittleDoubleMaxBar, DefaultCard},
  props: {
    cardList: Array,
    tabPosition: "right",
    showHpMp: "true",
    card: Card()
  },
  methods: {
    currentHandler: function (current) {
      this.$emit('cardListChange', current)
    },
  }, data() {
    return {
      store
    }
  }, computed: {
    stateGroup() {
      return this.$store.state.stateGroup
    },
    stateColor() {
      return this.$store.state.stateGroupColor
    }
  }
}
</script>

<style scoped>
</style>
